{% extends "PopshouseAdminBundle::layout.html.twig" %}
{% block title %}
Pagina instellingen
{% endblock %}
{% block content %}
<div class="left side">
    {% include "PopshouseAdminBundle:Page:menu.html.twig"  %}
</div>
<div class="left content" style="width:670px">
<h2>Pagina instellingen - {{page.name}}</h2>



<img src="{{ asset('images/layout/loader.gif') }}" id="loader" style="display:none;" />

<div class="flash-notice" style="display:none;"></div>


<style>
dt{font-weight:bold;}
dd{margin-bottom:10px;}
</style>
<form id="sort" name="sort" enctype="application/x-www-form-urlencoded" method="post" action="#">
 {% form_theme form 'PopshouseSiteBundle::form.html.twig' %}
            {{ form_errors(form) }}
    <dl>
        <dt>{{ form_label(form.imgPosition,'Afbeeldingen rechts weergeven') }}</dt>
        <dd id="radio">
        {{ form_widget(form.imgPosition) }}{{ form_errors(form.imgPosition) }} 
        </dd>
        <dt>{{ form_label(form.imgWidth,'Breedte van de afbeeldingen balk (in procent)') }}</dt>
        <dd>
	    {{ form_widget(form.imgWidth) }}{{ form_errors(form.imgWidth) }}
        </dd>
        <dt>Afbeeldingen selecteren</dt>
        <dd>
        <div style="float:left;width:75%;">
        <i>Bibliotheek:</i>
        <ol class="images connectedSortable sortable" style="width:100%;border:2px solid #ccc;" id="sortable1">
		   {% for image in images %}
		    <li id="album_{{image.id}}">
		    <img class="bg" src="{{ asset('images/photo/database/' ~ image.id ~ 't.jpg') }}" />
		    </li>
		    {% endfor %}
		</ol>
		</div>
        <div style="float:left;width:22%;">
        <i>Pagina:</i>
         <ol class="connectedSortable sortable" style="margin-left:5px;width:100%;border:2px solid #ccc;" id="sortable2">
            {% for image in page.imgsSide %}
            <li id="album_{{image.image.id}}">
            <img class="bg" src="{{ asset('images/photo/database/' ~ image.image.id ~ 't.jpg') }}" />
            </li>
            {% endfor %}
        </ol>
        </div>
        </dd>
        <dt id="order-label">&nbsp;</dt>
        <dd id="order-element">
            <input type="hidden" name="order" value="" id="order" />
        </dd>
         {{ form_rest(form) }}
        <dt id="submit-label">&nbsp;</dt>
        <dd id="submit-element">
            <input type="submit" name="submit" id="submit" value="Opslaan" />
        </dd>
    </dl>
</form>    

</div>
{% endblock %}
{% block js %}
//$( "#radio" ).buttonset();
var select = $( "#page_imgWidth" );
        var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
            min: 10,
            max: 40,
            step: 5,
            range: "min",
            value: select[ 0 ].selectedIndex * 5 + 10,
            slide: function( event, ui ) {
                select[ 0 ].selectedIndex = (ui.value - 10) / 5;
            }
        });
        $( "#page_imgWidth" ).change(function() {
            //alert(this.selectedIndex);
            slider.slider( "value", this.selectedIndex * 5 + 10 );
        });
        
        $( "#sortable1").sortable({
            connectWith: ".connectedSortable",
            dropOnEmpty: true
        }).disableSelection();
        
        
       $("#sortable2").sortable({
            connectWith: ".connectedSortable",
            update: function(){
                $("#order").val($(this).sortable('serialize'));
            }
        }).disableSelection();

        
{% endblock %}